<template>
  <div style="display: inline-block; margin: 10px 5px;" @click="handleClick()">
    <el-card class="box-card">
      <div slot="header" style="text-align: center;font-weight:bold;font-size:18px;color:#356ac3;">
        <span>{{title}}</span>
      </div>
      <div style="text-align: left;position: relative;top:150px;color:gray;"><span>Time  |</span>  {{time}}</div>
      <div><img :src="imgUrl" style="float:right;width:300px;"></div>
      <div style="padding: 10px 0px;text-align: justify;color:gray;width: 600px;">
        <p> {{details}} </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    title: {type:String,default:""},
    imgUrl: {type:String,default:""},
    time: {type:String,default:""},
    details: {type:String,default:""},
    uuid: {type:String,default:""},
  },
  methods: {
    handleClick() {
      let path_txt = '/news?uuid='+this.uuid;
      this.$router.push({path:path_txt})
    },
  }

}
</script>

<style lang="less" scoped>
  /deep/.el-card__header{ padding: 10px 20px;}
  /deep/.el-card__body{ padding: 10px 20px;}
  .el-card{ width:1200px;height: 250px; border-radius:20px;}
</style>
